// 公共卡片组件引入
import VCard from "../components/VCard.vue";
// 引入图表轮播组件
import LoopSwiperCharts from "../components/LoopSwiperCharts.vue";
// 引入头部切换选择组件
import SelectControl from "../components/SelectControl.vue";
// 引入自动轮播的折线图组件
import LineChart from "../components/LineChart.vue";
const MIXIN = {
  components: {
    VCard,
    LoopSwiperCharts,
    SelectControl,
    LineChart
  },
  props: {
    // 用于头部切换选择组件的货种选择
    cargoList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 贸易商1 货名2 港口3
      tag: "1",
      // 用于渲染图表的数据
      chartData: []
    };
  },
  methods: {
    // 头部切换选择组件 数据切换时触发 用于切换当前tag 及根据用户选择进行数据查询
    fetchData({ tag, cargoName }) {
      this.tag = tag;
      /**
       *  重点
       * 
       *  需要实现 getChartData 方法  用于获取图表渲染数据
       * **/
      this.getChartData({ tag, cargoName });
    },

  },
  mounted() {
    // 初始化时加载数据
    const params = {
      tag: this.tag,
      cargoName: []
    };
    this.fetchData(params);
  }
}

export default MIXIN;